<template>
	<view style="padding-bottom: 30px;">
		
		<cu-custom :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		<view class="workOrder-con">
			<view class="workOrder-ul">
				<view class="workOrder-li" v-for="(item,i) in orderPoolList" :key="item.id" @tap="onTab(i,item)">
			        <image class="imageStyle" :src="i === start ? item.srcHover : item.src" mode=""></image>
					<text class="textStyle">{{ item.name }}</text>
				</view>
			</view>
		</view>
		
		<evaluate v-if="evaluateShow"></evaluate>
		<view class="workOrder-list" v-else v-for="data in workOrder" :key="data.id">
			<view class="workOrder-list-li">
				<view class="workOrder-li-top">
					<text class="worktextStyle">{{ data.name }}</text>
					<view class="worktextYyueStyle">预约时间:{{ data.appointmentTime }}</view>
				</view>
				<view class="workOrder-li-center">
					<view class="workkhxm">
						<text class="workkhxmName">客户姓名：</text>
						<text class="workkhxmRight">{{ data.addresseeName }}</text>
					</view>
					<view class="workkhxm">
						<text class="workkhxmName">订单地址：</text>
						<text class="workkhxmRight">{{ data.detailAddress }}</text>
					</view>
					<view class="workkhxm">
						<text class="workkhxmName">下单时间：</text>
						<text class="workkhxmRight">{{ data.createTime }}</text>
					</view>
					<view class="workkhxm">
						<text class="workkhxmName">联系方式：</text>
						<text class="workkhxmRight">{{ data.telephone }}</text>
					</view>
				</view>
				<view class="workOrder-li-bottom">
					<view class="workOrder-btnlq workOrder-btn" v-if="start === 0" @tap="collectworkOrder(data.id)">领取工单</view>
					<view class="workOrder-btnxg workOrder-btn" v-if="start === 1" @tap="editRouter(data)">修改工单</view>
					<view class="workOrder-btnlq workOrder-btn" v-if="start === 1" @tap="handleRouter(data)">处理工单</view>
					<view class="workOrder-btncl workOrder-btn" v-if="start === 3">立即预约</view>
					<!-- <view class="workOrder-btnlq workOrder-btn" v-if="start === 1">完成</view> -->
					<view class="workOrder-btnycl workOrder-btn" v-if="start === 2">完成</view>
				</view>
			</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import config from 'config/env'
	import { getSkllWork,getCollectWorkOrder } from '@/api/skill.js'
	export default {
		data() {
			return {
				pageDesign: {
					pageName: '工单'
				},
				colorS:'907fff',
				theme: getApp().globalData.theme, //主题
				start:0,
				evaluateShow:false,//评价
				current:1,
				size:10,
				status:1, //未领取
				jsfe:'净水服务',
				orderPoolList:[
					{
						id : 0,
						name : '工单池',
						src:`${config.imgSrcL}gongdan-one.png`,
						srcHover:`${config.imgSrcL}gongdan-two.png`,
					},
					{
						id : 1,
						name : '待处理',
						src:`${config.imgSrcL}daichuli-one.png`,
						srcHover:`${config.imgSrcL}daichuli-two.png`
					},
					{
						id : 2,
						name : '已处理',
						src:`${config.imgSrcL}yichuli-one.png`,
						srcHover:`${config.imgSrcL}yichuli-two.png`
					},
					{
						id : 3,
						name : '评价',
						src:`${config.imgSrcL}dianpin-two.png`,
						srcHover:`${config.imgSrcL}dianpin-one.png`
					},
				],
				// workOrder:'',
				workOrder:''
			};
		},
		onShow() {
			// 获取跳转来源的路径信息
			const previousPath = uni.getStorageSync('previousPath');
			
			// 检查是否从 /subpkg/skill/editWork/editWork 路径跳转回来
			if (previousPath === '/subpkg/skill/editWork/editWork') {
			  // 执行你想要触发的逻辑
			   this.handleTabChange(false, 2);
			}
		
			// 清除本地缓存信息，避免对后续页面跳转产生干扰
			uni.removeStorageSync('previousPath');
		},
		onLoad() {
			this.getSkllWorkList()
		},
		methods:{
			// onTab(i,item){
			// 	this.start = i
			// 	switch (i) {
			// 	    case 0:
			// 	      console.log('工单池');
			// 		  this.evaluateShow = false
			// 		  this.status = 1
			// 		  this.getSkllWorkList()
			// 	      break;
			// 	    case 1:
			// 	      console.log('待处理');
			// 		  this.evaluateShow = false
			// 		  this.status = 2
			// 		  this.getSkllWorkList()
			// 	      break;
			// 	    case 2:
			// 	      console.log('已处理');
			// 		  this.evaluateShow = false
			// 		  this.status = 5
			// 		  this.getSkllWorkList()
			// 	      break;
			// 	    default:
			// 	      console.log('评价');
			// 		  this.evaluateShow = true
			// 	      break;
			// 	}
			// 	console.log(this.start)
			// },
			/**********切换查询数据********/
			onTab(i, item) {
			  this.start = i;
			  switch (i) {
			    case 0:
			      this.handleTabChange(false, 1);
			      break;
			    case 1:
			      this.handleTabChange(false, 2);
			      break;
			    case 2:
			      this.handleTabChange(false, 5);
			      break;
			    default:
			      this.handleTabChange(true);
			      break;
			  }
			
			  console.log(this.start);
			},
			handleTabChange(evaluateShow, status) {
			  this.workOrder = ''
			  this.evaluateShow = evaluateShow;
			  if (status !== undefined) {
			    this.status = status;
			    this.getSkllWorkList(); // 只有在指定了status时才发送请求
			  }
			},
			// 领取工单
			collectworkOrder(itemId){
				this.getCollectWorkData({
					id : itemId
				})
			},
			editRouter(data){
				uni.navigateTo({
					url:`/subpkg/skill/editWork/editWork?data=${JSON.stringify(data)}`
				})
			},
			handleRouter(data){
				uni.navigateTo({
					url:`/subpkg/skill/createWork/createWork?data=${JSON.stringify(data)}`
				})
			},
			async getSkllWorkList(){
			
				const { data } = await getSkllWork({
					current : this.current,
					size:this.size,
					status:this.status
				})
				
				this.workOrder = data.records
				
				console.log(this.workOrder)
			},
			async getCollectWorkData(obj){
		
				const { data} = await getCollectWorkOrder(obj)
				
				if(data === '领取成功'){
					this.$refs.uToast.show({
						title: data,
						type: 'success',
					})
					this.getSkllWorkList()
				}
				
				console.log(data)
				
			}
		}
	}
</script>

<style lang="scss">
.workOrder-list{
	width: 703rpx;
	height: 400rpx;
	background: #FFFFFF;
	border-radius: 23rpx;
	margin: 15px auto;
}
.workOrder-li-top{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ededed;
	
	padding: 15px;
	.worktextStyle{
		color: #000;
		font-size: 28rpx;
	}
	.worktextYyueStyle{
		color:#7C808E;
		font-size: 23rpx;
		&::before {
		    content: "";
		    display: inline-block;
		    width: 11rpx;
		    height: 11rpx;
		    margin-right: 6px;
		    border-radius: 50%;
		    background-color: #546CFC;
		}
	}
}
.workOrder-li-center{
		padding: 0 15px;
		.workkhxm{
			font-size: 26rpx;
			color: #7C808E;
			margin: 10px 0;
		}
		.workkhxmRight{
			color: #000;
			margin-left: 10rpx;
		}
}
.workOrder-li-bottom{
	padding: 0 15px;
	display: flex;
	justify-content: flex-end;
	.workOrder-btn{
		width: 137rpx;
		height: 50rpx;
		background: #18b1bb;
		border: 1px solid #18b1bb;
		border-radius: 14rpx;
		color: #fff;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		margin-left: 10px;
	}
}

.bgLiner{
	background: #fff;
	color: #000;
}
.workOrder-con{
	background-color: #fff;
	padding: 15px;
}
.workOrder-ul{
	display: flex;
	justify-content: space-between;
	.workOrder-li{
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.textStyle{
			margin-top: 10rpx;
		}
		.imageStyle{
			width: 50.55rpx;
			height: 50.55rpx;
			margin-bottom: 10rpx;
		}
	}
}
.workOrder-btnxg{
	color: #18b1bb !important;
	background-color: #fff !important;
}
.workOrder-btnycl{
	color: #fff !important;
	background-color: #F3A851 !important;
	border: 1px solid #F3A851 !important;
}

</style>
